<template>
<div>
  <!--
   :data:里面的值 就是我们列表返回的数据
    在template中 我们只能获取到data()函数中的数据
  -->
  <el-table
    :data="tableData"
    :row-class-name="tableRowClassName"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>

  </el-table>
  <!--分页插件-->
  <el-pagination
    align="right"
    background
    layout="prev, pager, next"
    :total="totals"
    :current-page="currentPage"
    :page-size="pageSize"
     @current-change="gotoPage">
  </el-pagination>

</div>
</template>

<script>
export default {
  data () {
    return {
      totals:0,
      currentPage:1,
      pageSize:5,
      tableData: []
    }
  },
  // 基本上就是去调后端接口 获取数据的！
  // 获取到的数据 就是赋值给data()函数里面的属性
  // data()函数里面属性有值了(有数据了) 那么上面template中就能获取到
  methods: {
    getUserList(){
      // 调用后端接口 获取用户数据
      let para = {"currentPage":this.currentPage,"pageSize":this.pageSize}
      this.$http.post("/user/list",para)
        .then(result=>{
          // 调用后端 后端返回的数据就在这里
          this.tableData = result.data.data;
          this.totals = result.data.totals;
        })
        .catch(result=>{
          alert(result)
          alert("网络不通！")
        })
    },
    gotoPage(curr) {
      this.currentPage = curr;
      this.getUserList();
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return 'warning-row';
      } else if (rowIndex === 2) {
        return 'success-row';
      }else if (rowIndex === 4){
        return 'succes-row';
      }
      return '';
    }
  },
  // 想获取列表的第一页数据 就需要走钩子
  mounted() {
    this.getUserList();
  }
}
</script>


<style>
.el-table .warning-row {
  background: #1031cd;
}
.el-table .succes-row {
  background: #42b983;
}

.el-table .success-row {
  background: #e52074;
}
</style>
